<template>
	<view>
		<!-- 自定义导航 -->
		<uniNavBar title='购物车' leftText='关闭' fixed='true' statusBar='true'
			@clickLeft='back'></uniNavBar>
			
			<view class="pay-main"> 
			<label>
					<view class="pay-item">
						<image class="pay-img" src="../../static/image/zfb.png" mode=""></image>
						<view class="pay-text">
							<view>支付宝支付</view>
							<view class="pay-text-2">推荐支付宝用户使用</view>
						</view>
							<label class="radio">
								<radio value="" color="red"/><text></text>
							</label>
					</view>
				</label>
				
				<label>
				<view class="pay-item">
					<image class="pay-img" src="../../static/image/wxf.png" mode=""></image>
					<view class="pay-text">
						<view>微信支付</view>
						<view class="pay-text-2">推荐有微信用户使用</view>
					</view>
						<label class="radio">
							<radio value="" color="red"/><text></text>
						</label>
				</view>
				</label>
			</view>
			
			<view class="pay-foot">
				<view class="pay-foot-line">
				    <text>合计:</text><text class="pay-foot-tool">$15212</text>
				</view>
				<view class="pay-foot-text" @tap="goToPayment()">
                       去支付
				</view>
			</view>
	</view>
</template>

<script>
	import uniNavBar from "@/component/uni/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				
			}
		},
		components:{
			uniNavBar
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			goToPayment(){
				uni.navigateTo({
					url:"/pages/payment-success/payment-success"
				})
			}
			
		}
	}
</script>

<style scoped>
.pay-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #acacac;
}
.pay-text-2{
	color: #acacac;
}
.pay-img{
	width: 100rpx;
	height: 100rpx;
}
.pay-foot{
	position: fixed;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.pay-foot-line{
	line-height: 100rpx;
	background-color: black;
	padding-left: 100rpx;
	color: white;
	flex: 1;
}
.pay-foot-text{
	color: white;
	background-color: #42B7FB;
	line-height: 100rpx;
	text-align: center;
	width: 220rpx;
}
.pay-foot-tool{
	color: white;
	font-weight: bold;
}
</style>
